<template>
  <div
    class="d-flex"
    :class="{
      'flex-center': align === 'center',
      'flex-left': align === 'left',
      'flex-right': align === 'right',
    }"
  >
    <div class="layui-box layui-laypage layui-laypage-default">
      <a
        @click.prevent="home()"
        class="layui-laypage-prev"
        v-show="showEnd"
        :class="{ 'layui-disabled': current === 0 }"
      >
        <i class="layui-icon layui-icon-prev" v-if="showType === 'icon'"></i>
        <template v-else>首页</template>
      </a>
      <a :class="{ 'layui-disabled': current === 0 }" @click.prevent="prev()"
        ><i class="layui-icon layui-icon-left" v-if="showType === 'icon'"></i>
        <template v-else>上一页</template></a
      >
      <!-- <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em> -->
      <!-- <a href="javascript:;" :class="[true ? theme : '', true ? 'active' : '']"
        >1</a
      > -->
      <!-- current +2 <page.length 显示... -->
      <!-- current -2 > 1 显示... -->
      <a v-if="pages.length > 5 && current - 1 > 1" href="javascript:;">...</a>
      <template v-for="(item, index) in pages">
        <!-- v-if="item >= current - 2 && item <= current + 2" -->
        <a
          @click="changeindex(index)"
          v-if="item >= current - 1 && item <= current + 3"
          href="javascript:;"
          :key="'page' + index"
          :class="[
            current === index ? theme : '',
            current === index ? 'active' : '',
          ]"
          >{{ item }}</a
        >
      </template>
      <a
        v-if="pages.length > 5 && current + 3 < pages.length"
        href="javascript:;"
        >...</a
      >
      <a
        @click.prevent="next()"
        :class="{ 'layui-disabled': current === pages.length - 1 }"
        ><i class="layui-icon layui-icon-left" v-if="showType === 'icon'"></i
        ><template v-else>下一页</template>
      </a>
      ><a
        @click.prevent="end()"
        :class="{ 'layui-disabled': current === pages.length - 1 }"
        class="layui-laypage-next"
        v-show="showEnd"
        ><i class="layui-icon layui-icon-next" v-if="showType === 'icon'"></i>
        <template v-else>尾页</template></a
      >
    </div>
    <div class="total" v-show="hasTotal">
      到第<input type="text" class="mf-input" v-model="topage" />页 共{{
        length
      }}页
    </div>
    <div class="" v-if="hasSelect">
      <div class="layui-iput-block cc" @click="fav">
        <div
          class="layui-unselect layui-form-select aa"
          :class="{ 'layui-form-selected': isSelect }"
        >
          <div class="layui-select-title">
            <input
              type="text"
              readonly
              v-model="options[optIndex]"
              class="layui-iput2 layui-unselect layui-col-md5"
            />
          </div>
          <dl class="layui-anim2 layui-anim-upbit">
            <dd
              v-for="(item, index) in options"
              :key="'options' + index"
              @click="chooseFav(item, index)"
              :class="{ 'layui-this': index === isSelect }"
            >
              {{ item }}
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: '',
  components: {},
  props: {
    align: {
      type: String,
      default: 'center',
    },
    showType: {
      type: String,
      default: 'text'
    },
    showEnd: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'layui-bg-green'
    },
    hasTotal: {
      type: Boolean,
      default: false
    },
    hasSelect: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 10
    }
  },
  data () {
    return {
      isSelect: false,
      optIndex: 0,
      cataIndex: 0,
      pages: [],
      limit: 10,
      options: [10, 20, 30, 40, 50, 100],
      length: '',
      topage: ''
    };
  },
  watch: {
    //监听total变化后重新刷新
    total (newval, oldval) {
      this.initPages()
    }
  },
  computed: {
    // total: function () {
    //   return this.initPages()
    // }
  },
  created () { },
  mounted () {
    var lett = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key == 13) {
        lett.toPage()
      }
    }
    //初始化分页长度
    //设置下拉选择框内容
    // this.initPages()
    // this.limit = this.size
    //
    this.limit = this.size
    this.initPages()
    this.options = _.uniq(_.sortBy(_.concat(this.options, this.size)))
    this.optIndex = this.options.indexOf(this.size)

  },
  methods: {
    //首页
    home () {
      this.$emit('changeCurrent', 0)
    },
    //尾页
    end () {
      this.$emit('changeCurrent', this.pages.length - 1)
    },
    //上一页
    prev () {
      let cur = 0
      if (this.current - 1 < 0) {
        cur = 0
      } else {
        cur = this.current - 1
      }
      this.$emit('changeCurrent', cur)
    },
    //下页
    next () {
      let cur = 0
      if (this.current + 1 > this.pages.length) {
        cur = this.pages.length - 1
      } else {
        cur = this.current + 1
      }
      this.$emit('changeCurrent', cur)
    },
    //获取页面的长度
    initPages () {
      // const length = Math.ceil(this.total / this.size)
      //
      const length = Math.ceil(this.total / this.limit)
      this.length = length
      this.pages = _.range(1, length + 1)
    },
    fav () {
      this.isSelect = !this.isSelect;
    },
    //不同的page类别查询
    chooseFav (item, index) {
      // 
      if (this.optIndex !== index) {
        this.$emit('changeCurrent', Math.floor(this.limit * (this.current + 1) / this.options[index]))
        this.$emit('changeLimit', this.options[index])
      }
      this.optIndex = index;
      //
      this.limit = this.options[this.optIndex]
      this.initPages()
      //当页面上的limit发生变化调整currt值
    },
    changeindex (val) {
      console.log(val);
      if (val !== this.current) {
        this.$emit('changeCurrent', val)
      }
    },
    //跳转页面
    toPage () {
      let page = this.topage - 1
      if (page !== this.current && page < this.length) {
        this.$emit('changeCurrent', page)
      }
    }
  },
};
</script>

<style scoped lang="scss">
.layui-laypage {
  a {
    // &:first-child {
    //   border-right: 0;
    // }
    // &:last-child {
    //   border-right: 0;
    // }
    &.active {
      border-radius: 2px;
      position: relative;
      z-index: 100;
    }
  }
}
.layui-bg-green {
  border-color: #009688;
}
.total {
  color: rgb(59, 34, 34);
  margin-left: 20px;
  position: relative;
  top: -2px;
}
.mf-input {
  padding: 0 5px;
  height: 15px;
  width: 30px;
  line-height: 28px;
}
.aa dl {
  min-width: 10%;
}
.layui-col-md5 {
  height: 30px;
  width: 20%;
  // margin-top: -4px;
}
.layui-form-select {
  position: relative;
  top: -2.5px;
  left: 20px;
  line-height: 30px;
}
</style>
